<template>
    <div class="box">
        <div class="head">
            <a>逗圈</a>
            <i class="el-icon-search"></i>
        </div>
        <div class="head_tou">
            <el-tabs v-model="activeName">
                <el-tab-pane label="推荐" name="first">
                 <div class="hui">
                            <p>今日推荐    <a href="#">更多<span class="el-icon-arrow-right"></span></a></p>
                     </div>
                      <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/15.gif" alt="">
                            </div>
                                <h1>拜金女的生活</h1>
                                <b>创建人:隔壁老王</b> </br>
                        <div class="chang">
                            <span>生活的意图，眼中只有钱没有任何其他向往，只有money！！！</span>
                        </div>
                </div>
                 <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/26.gif" alt="">
                            </div>
                                <h1>爱的奇迹</h1>
                                <b>创建人:刘闯</b> </br>
                        <div class="chang">
                            <span>爱的苦涩，去体会爱的路途中的快乐，体会爱的苦涩！！
                            去体会爱的路途中的快乐为那些这辈的生活而去奋斗，
                            去体会爱！！</span>
                        </div>
                </div>
                </el-tab-pane>
                <el-tab-pane label="分类" name="second" >
                <div class="bei">
                    <p><a href="#">更多<span class="el-icon-arrow-right"></span></a></p>
                    </div> 
                    <div class="say">        
                    <ul>    
                        <li>
                            <img src="../../assets/images/3.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/5.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/6.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                    </ul>
                    </div>
                    <br>
                    <p> 轻聊 <a href="#">更多<span class="el-icon-arrow-right"></span></a></p>
                    <div>       
                    <ul>    
                        <li>
                            <img src="../../assets/images/4.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/5.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/6.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                    </ul>
                    </div>
                    <br>
                    <p> 快谈  <a href="#">更多<span class="el-icon-arrow-right"></span></a></p>   
                    <div>
                    
                    <ul>    
                        <li>
                            <img src="../../assets/images/7.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/8.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                        <li>
                            <img src="../../assets/images/8.gif" alt="">
                            <h2>社会恐惧症</h2>
                            <b>342342个恐友</b>
                        </li>
                    </ul>
                    </div>             
                </el-tab-pane>
                <el-tab-pane label="加入" name="third" >
                    <p> 闲聊 <a href="#">更多<span class="el-icon-arrow-right"></span></a></p>
    
                <div class="wenben">
                        <div class="tu">
                            <img src="../../assets/images/15.gif" alt="">
                        </div>
                            <h1>长征路远心更远</h1>
                            <b>创建人:背着书包的小而</b> </br>
                    <div class="chang">
                        <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，我们只有去不断去坚持！！去加油，去深究！！加油！！</span>
                    </div>
                </div>

                <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/16.gif" alt="">
                            </div>
                                <h1>长征路远心更远</h1>
                                <b>创建人:背着书包的小而</b> </br>
                    <div class="chang">
                        <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，我们只有去不断去坚持！！去加油，去深究！！加油！！</span>
                    </div>
                </div>

                <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/17.gif" alt="">
                            </div>
                                <h1>长征路远心更远</h1>
                                <b>创建人:背着书包的小而</b> </br>
                        <div class="chang">
                            <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，我们只有去不断去坚持！！去加油，去深究！！加油！！</span>
                        </div>
                </div>

                <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/18.gif" alt="">
                            </div>
                                <h1>长征路远心更远</h1>
                                <b>创建人:背着书包的小而</b> </br>
                        <div class="chang">
                            <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，我们只有去不断去坚持！！去加油，去深究！！加油！！</span>
                        </div>
                </div>

                 <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/19.gif" alt="">
                            </div>
                                <h1>长征路远心更远</h1>
                                <b>创建人:背着书包的小而</b> </br>
                        <div class="chang">
                            <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，我们只有去不断去坚持！！去加油，去深究！！加油！！</span>
                        </div>
                </div>
                </el-tab-pane>
                <el-tab-pane label="创建" name="fourth">
                    <div class="hui">
                            <p>我加入的逗圈    <a href="#">更多<span class="el-icon-arrow-right"></span></a></p>
                     </div>
                      <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/15.gif" alt="">
                            </div>
                                <h1>拜金女的生活</h1>
                                <b>创建人:隔壁老王</b> </br>
                        <div class="chang">
                            <span>生活的意图，眼中只有钱没有任何其他向往，只有money！！！</span>
                        </div>
                </div>
                 <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/26.gif" alt="">
                            </div>
                                <h1>爱的奇迹</h1>
                                <b>创建人:刘闯</b> </br>
                        <div class="chang">
                            <span>爱的苦涩，去体会爱的路途中的快乐，体会爱的苦涩！！
                            去体会爱的路途中的快乐为那些这辈的生活而去奋斗，
                            去体会爱的路！</span>
                        </div>
                </div>
                 <div class="wenben">
                            <div class="tu">
                                <img src="../../assets/images/20.gif" alt="">
                            </div>
                                <h1>长征路远心更远</h1>
                                <b>创建人:背着书包的小而</b> </br>
                        <div class="chang">
                            <span>路的长远不是说出来的才能体会其中的道理没有资格去批评某些人，去加油，去深究！！加油！！</span>
                        </div>
                </div>

                </el-tab-pane>
            </el-tabs>
        </div>
        <Homenav></Homenav>
    </div>
 
</template>
<script>
import Homenav from '@/components/homenav'
export default{
    
    name:'stiring',
    components:{
            Homenav
        },
    data(){
        return{
             activeName: 'first'
        };
    },
    methods:{
        handleClick(tab, event) {
        console.log(tab, event);
      }
    }
    
    } 
</script>
<style lang="less" scoped>

.tu{
    float:left;
}
.tu img{
    width:110/35rem;
    margin-top:10/35rem;
    margin-left:10/35rem;
    }
.wenben{
    position:relative;
     float:left;  
     background:;
     border-bottom:10px solid #f2f2f2;
     h1{
         
         margin-top:14/35rem;
        font-weight:600;
         font-size: 20/35rem;
     } 
     b{
         position: absolute;
         font-size: 15/35rem;
         top:37/35rem;
         left:120/35rem;  
         color:gray;
     }
    }
    .chang{
        margin-top:10/35rem;
        amrgin-left:5/35rem;
        }
.head{
    height:40/35rem;
    border-bottom: 2px solid gray;
}
.head .el-icon-search{
    float:right;
     font-size: 22/35rem;
    margin-top:-30/35rem;
    margin-right:8/35rem;
}
 .head a{
     margin-top:4/35rem;
    display: block;
    line-height:40/35rem;
    font-size: 26/35rem;
    text-align:center;
}
.hui{
    height:30/35rem;
    background:#f2f2f2;
}
.hui p{
     color:#2780fe;
    line-height:30/35rem;
}
.hui a{
    color:#2780fe;
    text-decoration: none;
    float:right;
}

    p{
      	display:inline;
        margin-left:5/35rem;
         font-size: 18/35rem;
        color:#2780fe;
         height:40/35rem;
        line-height:40/35rem;
        background:#f2f2f2;
    a{
        float:right;
    }
 
    } 
    ul li{
        float:left;
        margin-left:22/35rem;
        text-align:center;
        
        img{
            margin-top:10/35rem;
            width:90/35rem;
        }
        h2{
            font-size: 18/35rem;
            font-weight:600;
        }
    }
    .bei{
        background:#f2f2f2;
    }





</style>